<template lang="pug">
el-dialog(
  :visible.sync="show"
  width="1024px"
  @open="beforeOpen"
  :before-close="handleClose"
  custom-class="dialog-border"
  :close-on-click-modal="false"
)
  .modal-title(slot="title") 添加材料
  .modal-content
    .modal-header
      .modal-search
        el-input(placeholder="材料名称/供应商名称" prefix-icon="el-icon-search" v-model="searchContent" @change="changeSearch")
        el-select(placeholder="选择品牌" prefix-icon="el-icon-search" clearable v-model="brandId" @change="changeBrand")
          el-option(v-for="(item, index) in brandList" :key="index" :label="item.name" :value="item.id")
        el-select(placeholder="选择状态" prefix-icon="el-icon-search" clearable v-model="status" @change="changeStatus")
          el-option(label="已设置" :value="true")
          el-option(label="未设置" :value="false")
    .modal-list-table
      el-table(
        :data="list"
        :header-cell-style="{ fontSize: '14px', color: '#64698F', background: '#F8F7FC' }"
        border
        style="width: 100%"
        v-loading="loading"
        empty-text="未找到符合条件的内容"
      )
        el-table-column(type="index" width="55" align="center" label="序号")
        el-table-column(label="材料名称" prop="materialName")
        el-table-column(label="品牌" prop="brandName")
        el-table-column(label="供应商" prop="supplierName")
        el-table-column(label="价格")
          template(slot-scope="scope") ￥ {{ !scope.row.minMarketPrice ? scope.row.maxMarketPrice : (!scope.row.maxMarketPrice ? scope.row.minMarketPrice : scope.row.minMarketPrice + '-' + scope.row.maxMarketPrice) }}
        el-table-column(label="状态" prop="status")
          template(slot-scope="scope")
            .table-item-handle
              .table-item-btn(:class="!scope.row.status ? 'warning' : 'info'" @click.stop="setMaterial(scope.row)") {{ !scope.row.status ? '未设置' : '已设置' }}
      .table-pagination
        el-pagination(
          background
          layout="prev, pager, next, jumper"
          :total="total"
          :current-page="page"
          :page-size="pageSize"
          @current-change="currentChange"
        )
</template>

<script>
import { getBrandList, getMaterialsList, setHotMaterials } from 'api'
export default {
  name: 'addMaterialDialog',
  props: {
    show: Boolean
  },
  data () {
    return {
      page: 1,
      pageSize: 10,
      total: 0,
      loading: false,
      list: [],
      searchContent: '',
      brandId: '',
      status: '',
      brandList: []
    }
  },
  methods: {
    currentChange (page) {
      this.page = page
      this.getList()
    },
    changeSearch () {
      this.page = 1
      this.getList()
    },
    changeBrand () {
      this.page = 1
      this.getList()
    },
    changeStatus () {
      this.page = 1
      this.getList()
    },
    async setMaterial (row) {
      if(row.status) {
        //取消热门材料设置
        this.$confirm('是否确定删除该材料设置？', '取消提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          try {
            let query = {
              materialId: row.id
            }
            await this.$axios.post(setHotMaterials, { ...query })
            this.$message.success('取消成功！')
            this.currentChange()
          } catch (err) {
            console.log(err)
            this.$message.error(err.message || err.ResultSet.errors)
          }
        }).catch((e) => {
          console.log(e)
        })
      } else {
        //添加热门材料设置
        try {
          let query = {
            materialId: row.id
          }
          await this.$axios.post(setHotMaterials, { ...query })
          this.$message.success('设置成功！')
          this.currentChange()
        } catch (err) {
          console.log(err)
          this.$message.error(err.message || err.ResultSet.errors)
        }
      }
    },
    async getList () {
      try {
        this.loading = true
        let query = {}
        query.currentPage = this.page
        query.pageSize = this.pageSize
        if (this.searchContent) query.searchContent = this.searchContent
        if (this.brandId) query.brandId = this.brandId
        if (this.status !== '') query.status = this.status
        const { ResultSet } = await this.$axios.post(getMaterialsList, { ...query })
        this.total = ResultSet.userData.recordNumber || 0
        this.list = ResultSet.userData.caseList || []
        this.loading = false
      } catch (err) {
        this.loading = false
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    async getBrandList () {
      try {
        const { ResultSet } = await this.$axios.post(getBrandList)
        this.brandList = ResultSet.userData.loadBrandList || []
      } catch (err) {
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    init () {
      this.getList()
      this.getBrandList()
    },
    beforeOpen () {
      this.page = 1
      this.pageSize = 10
      this.total = 0
      this.searchContent = ''
      this.brandId = ''
      this.status = ''
      this.init()
    },
    handleClose () {
      this.$emit('close')
    }
  }
}
</script>

<style lang="scss" scoped>
.modal-title {
  font-weight: bold;
  font-size: 16px;
  line-height: 24px;
  color: #3E4373;
}
.modal-header {
  width:100%;
  height:40px;
  margin-top:16px;
  margin-bottom:16px;
  .modal-search {
    display: flex;
    align-items: center;
    .el-input {
      width: 202px;
      margin-right: 16px;
    }
    .el-select {
      margin-right: 16px;
    }
    icon-search{
      cursor: pointer;
    }
  }
}
.table-pagination {
  padding: 24px 0;
  text-align: right;
}

.table-item-bd {
  &.flex {
    display: flex;
    align-items: center;
  }
  .table-item-tag {
    margin-right: 4px;
    margin-bottom: 4px;
    padding: 3px 10px;
    background: #F6F6F9;
    border-radius: 2px;
    font-size: 14px;
    line-height: 22px;
    color: #B2B4C7;
    &:hover {
      color: #8B8EAB;
    }
  }
}
.table-item-handle {
  display: flex;
  .table-item-btn {
    margin-right: 8px;
    padding: 5px 8px;
    font-size: 12px;
    line-height: 20px;
    border-radius: 6px;
    cursor: pointer;
    &.warning {
      background: #FDEFF1;
      color: #FF2E42;
    }
    &.normal {
      background: #F3F0FF;
      color: #7362F0;
    }
    &.info {
      background: #F6F6F9;
      color: #3E4373;
    }
  }
}
</style>
